<template>
  <div class="fixed-zbest read">
    <header class="header">
      <van-icon @click.stop="$router.go(-1)" name="arrow-left" />
      <div class="title">{{ bookInfo?.title }}</div>
    </header>
    <!-- <div class="content" v-html="chapter" ref="chapter"></div> -->
    <section class="content" v-if="bookInfo && leafList">
      <van-swipe
        ref="swipe"
        class="my-swipe"
        indicator-color="white"
        :loop="false"
        @change="changeCurrentIndex"
        duration="0"
      >
        <van-swipe-item v-if="this.leafList[this.currentIndex - 1]?.uuid">
          <ReadComponentVue
            :height="'calc(100vh - 1rem)'"
            :source_uuid="bookInfo.sourceUuid"
            :content_uuid="this.leafList[this.currentIndex - 1]?.uuid"
            :index="this.currentIndex - 1"
            :cacheList="cacheList"
            @addCacheList="addCacheList"
        /></van-swipe-item>
        <van-swipe-item
          ><ReadComponentVue
            :height="'calc(100vh - 1rem)'"
            :source_uuid="bookInfo.sourceUuid"
            :content_uuid="this.leafList[this.currentIndex]?.uuid"
            :index="this.currentIndex"
            :cacheList="cacheList"
            @addCacheList="addCacheList"
        /></van-swipe-item>
        <van-swipe-item v-if="this.leafList[this.currentIndex + 1]?.uuid"
          ><ReadComponentVue
            :height="'calc(100vh - 1rem)'"
            :source_uuid="bookInfo.sourceUuid"
            :content_uuid="this.leafList[this.currentIndex + 1]?.uuid"
            :index="this.currentIndex + 1"
            :cacheList="cacheList"
            @addCacheList="addCacheList"
        /></van-swipe-item>
      </van-swipe>
    </section>
    <footer class="footer">
      <div @click="toHow(0)">上一章</div>
      <div @click="toHow(1)">下一章</div>
    </footer>
  </div>
</template>

<script>
import ReadComponentVue from "../../components/read/ReadComponent.vue";
export default {
  components: {
    ReadComponentVue,
  },
  data: () => {
    return {
      chapterList: null,
      leafList: null,
      cacheList: null,
      bookInfo: null,
      chapter: "",
      currentIndex: 0,
      index: 1,
      auto: false,
    };
  },
  watch: {
    currentIndex(val) {
      console.log(val, "watch");
      this.api.changeReading({
        bookInfo: this.bookInfo,
        page: val + 1,
      });
      // this.$refs.chapter.scrollTop = 0;
      // this.getChapter();
    },
  },
  methods: {
    //上一章下一章(待处理)
    toHow(type) {
      if (type == 0) {
        this.$refs.swipe.prev();
        this.currentIndex =
          this.currentIndex - 1 < 0 ? 0 : this.currentIndex - 1;
      } else {
        this.$refs.swipe.next();
        this.currentIndex++;
      }
      this.$refs.swipe.swipeTo(1);
    },
    //增加缓存章节
    addCacheList({ chapter, index }) {
      this.cacheList[index] = chapter;
    },
    changeCurrentIndex(index) {
      console.log(index,"1111");
      if (this.auto&&this.currentIndex!=0) {
        this.auto = false;
        return;
      }
      this.$nextTick(() => {
        if (index == 1) {
          this.auto = true;
          this.$refs.swipe.swipeTo(1, true);
          this.currentIndex++;
          console.log(this.currentIndex,"sx");
        } else if (index == 2) {
          this.auto = true;
          this.$refs.swipe.swipeTo(1, true);
          this.currentIndex++;
        } else if (index == 0 && this.currentIndex - 1 != 0) {
          this.auto = true;
          this.$refs.swipe.swipeTo(1, true);
          this.currentIndex--;
        } else if (index == 0 && this.currentIndex - 1 == 0) {
          this.auto = true;
          this.$refs.swipe.swipeTo(0, true);
        }
      });
    },
    //获取当前章节列表
    getBookChapterList() {
      this.axios({
        method: "get",
        url: `${this.api.baseUrlData}/yunyuedu/reader/book/info.json?source_uuid=${this.$route.params.bookid}`,
      }).then((res) => {
        this.bookInfo = res.data.data.book;
        this.chapterList = res.data.data.catalog;
        // console.log(this.chapterList);
        this.leafList = this.chapterList.filter((item) => item.leaf);
        this.cacheList = new Array(this.leafList.length);
        let readHistory = JSON.parse(localStorage.getItem("readHistory")) || [];
        let page = null;
        readHistory.forEach((item) => {
          if (item.bookInfo.id == this.$route.params.bookid) {
            page = item.page;
            console.log(this.currentIndex, "page");
          }
        });
        if (!page) return;
        let toIndex = 1;
        if (page == 1) toIndex = 0;
        this.$nextTick(() => {
          this.auto = true;
          this.$refs.swipe.swipeTo(toIndex, false);
          this.currentIndex = page - 1 < 0 ? 0 : page - 1;
          console.log(this.currentIndex);
        });
        // this.getChapter();
      });
    },
  },
  activated() {
    console.log(this.bookInfo, "11");
    // if(this.bookInfo?.sourceUuid==this.$route.params.bookid){
    //   this.auto = true;
    //   this.$refs.swipe.swipeTo(1, false);
    //   return;
    // }
    this.getBookChapterList();
  },
};
</script>

<style lang="scss" scoped>
.read {
  box-sizing: border-box;
  padding: 0.5rem 0.2rem;
  background-color: var(--bgc-gray);
  .header {
    position: fixed;
    left: 0;
    top: 0;
    height: 0.5rem;
    width: 100%;
    background-color: var(--bgc-gray);
    z-index: 1000;
    display: flex;
    align-items: center;
    font-size: 0.2rem;
    box-sizing: border-box;
    padding: 0 0.15rem;
    .title {
      flex: 1;
      font-size: 0.15rem;
      margin-left: 0.2rem;
    }
  }
  .content {
    width: 100%;
    height: calc(100vh - 1rem);
    font-size: 0.2rem;
    line-height: 0.4rem;
    text-indent: 0.4rem;
    box-sizing: border-box;
    overflow: scroll;
    .my-swipe {
      width: 100%;
      height: 100%;
    }
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--bgc-gray);
    > div {
      flex: 1;
      height: 100%;
      line-height: 0.5rem;
      text-align: center;
    }
  }
}
</style>